<template>
  <div>
    <!-- 顶部导航栏 -->
    <div class="nav-tabs">
      <router-link 
        to="/personal-race" 
        class="nav-tab" 
        :class="{ active: $route.path === '/personal-race' }"
      >
        <el-icon class="nav-tab-icon"><data-line /></el-icon>
        <span class="nav-tab-text">个人赛</span>
      </router-link>
      <router-link 
        to="/video-playback" 
        class="nav-tab" 
        :class="{ active: $route.path === '/video-playback' }"
      >
        <el-icon class="nav-tab-icon"><video-camera /></el-icon>
        <span class="nav-tab-text">视频回放</span>
      </router-link>
    </div>
    
    <!-- 系统标题 -->
    <div class="system-title">
      <div class="connection-status">
        <span class="status-dot"></span>
        <span>系统已连接</span>
      </div>
      
      <div class="title-center">
        <div class="subtitle">轮滑速度过桩</div>
        <h1 class="main-title">{{ pageTitle }}</h1>
      </div>
      
      <div class="header-controls">
        <div class="controls-slot">
          <slot name="header-controls"></slot>
        </div>
      </div>
    </div>
  </div>
  <div class="theme-toggle">
    <el-tooltip :content="theme === 'dark' ? '切换到浅色模式' : '切换到深色模式'" placement="bottom">
      <el-button class="toggle-btn" text @click="toggleTheme">
        <el-icon v-if="theme === 'dark'" class="theme-icon"><moon /></el-icon>
        <el-icon v-else class="theme-icon"><sunny /></el-icon>
      </el-button>
    </el-tooltip>
  </div>
</template>

<script setup>
import { computed, onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import { Sunny, Moon } from '@element-plus/icons-vue'

const route = useRoute()

// 根据当前路由动态显示标题
const pageTitle = computed(() => {
  if (route.path === '/personal-race') {
    return '个人赛'
  } else if (route.path === '/video-playback') {
    return '视频回放'
  }
  return ''
})

// 主题切换
const theme = ref('light')

function applyTheme(value) {
  const root = document.documentElement
  if (value === 'dark') {
    root.setAttribute('data-theme', 'dark')
  } else {
    root.removeAttribute('data-theme')
  }
}

function toggleTheme() {
  theme.value = theme.value === 'dark' ? 'light' : 'dark'
  localStorage.setItem('ipad_ui_theme', theme.value)
  applyTheme(theme.value)
}

onMounted(() => {
  const saved = localStorage.getItem('ipad_ui_theme')
  theme.value = saved === 'dark' ? 'dark' : 'light'
  applyTheme(theme.value)
})
</script>

<style scoped>
.connection-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  color: #606266;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(228, 232, 236, 0.8);
  z-index: 5;
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #67c23a;
  box-shadow: 0 0 8px #67c23a;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(103, 194, 58, 0.6);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(103, 194, 58, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(103, 194, 58, 0);
  }
}

.header-controls {
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 15px;
  width: 130px;
}

.theme-toggle {
  position: absolute;
  top: 10px;
  right: 24px;
  z-index: 1000;
}

.toggle-btn {
  color: var(--text-secondary);
  transition: all 0.3s ease;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  padding: 8px;
}

.toggle-btn:hover {
  color: var(--accent-blue);
  background: rgba(64, 158, 255, 0.1);
  transform: translateY(-1px);
}

.theme-icon {
  font-size: 18px;
  transition: all 0.3s ease;
}

.toggle-btn:hover .theme-icon {
  transform: rotate(15deg);
}

.controls-slot {
  flex: 1;
}

/* 深色主题样式覆盖 */
[data-theme="dark"] .connection-status {
  background: rgba(32, 33, 36, 0.9);
  color: var(--text-secondary);
  border-color: var(--border-color);
  box-shadow: 
    0 2px 8px var(--shadow-weak),
    0 0 0 1px rgba(0, 212, 255, 0.2);
  position: relative;
  overflow: hidden;
}

[data-theme="dark"] .connection-status::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.1), transparent);
  animation: tech-scan 3s linear infinite;
}

[data-theme="dark"] .status-dot {
  background-color: var(--neon-blue);
  box-shadow: 
    0 0 8px var(--neon-blue),
    0 0 16px var(--neon-blue),
    0 0 24px var(--neon-blue);
  animation: neon-pulse 1.5s ease-in-out infinite alternate;
}

/* 深色主题下主题切换按钮样式 */
[data-theme="dark"] .toggle-btn {
  color: var(--text-secondary);
  position: relative;
  overflow: hidden;
  background: rgba(0, 212, 255, 0.1);
  border: 1px solid rgba(0, 212, 255, 0.3);
}

[data-theme="dark"] .toggle-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.1), transparent);
  transition: left 0.5s ease;
}

[data-theme="dark"] .toggle-btn:hover::before {
  left: 100%;
}

[data-theme="dark"] .toggle-btn:hover {
  color: var(--neon-blue);
  background: rgba(0, 212, 255, 0.1);
  box-shadow: 
    0 0 8px rgba(0, 212, 255, 0.3),
    0 0 16px rgba(0, 212, 255, 0.2);
  transform: translateY(-2px);
}

[data-theme="dark"] .theme-icon {
  filter: drop-shadow(0 0 4px rgba(0, 212, 255, 0.6));
}

/* 科技动画效果 */
@keyframes neon-pulse {
  0% {
    box-shadow: 
      0 0 8px var(--neon-blue),
      0 0 16px var(--neon-blue),
      0 0 24px var(--neon-blue);
  }
  100% {
    box-shadow: 
      0 0 12px var(--neon-blue),
      0 0 24px var(--neon-blue),
      0 0 36px var(--neon-blue);
  }
}

@keyframes tech-scan {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

/* 科技风格装饰线条 */
[data-theme="dark"] .nav-tabs::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--neon-blue), transparent);
  box-shadow: 0 0 6px var(--neon-blue);
  opacity: 0.6;
}

/* 连接状态科技效果增强 */
[data-theme="dark"] .connection-status span {
  position: relative;
  z-index: 2;
}

[data-theme="dark"] .connection-status:hover {
  border-color: var(--neon-blue);
  box-shadow: 
    0 2px 8px var(--shadow-weak),
    0 0 0 1px var(--neon-blue),
    0 0 12px rgba(0, 212, 255, 0.3);
}
</style> 